<template>
  <div class="month">
    <h2 class="h2">{{month}}</h2>
    <div>
      <Day1 :data="item" v-for="(item,i) in days" :key="i" class="day"/>
    </div>
  </div>
</template>

<script>
import Day1 from "./Day"
export default {
  name: 'month',
  components:{
    Day1
  },
  props:{
    data:{
      year:Number,
      listDays:Array,
    },
    item:Number
  },
  computed:{
    days(){ 
      return  new Date(this.data.year, parseInt(this.item, 10), 0).getDate(); 
    },
    month(){
      switch (this.item){
        case 1:return "一月";
        case 2:return "二月";
        case 3:return "三月";
        case 4:return "四月";
        case 5:return "五月";
        case 6:return "六月";
        case 7:return "七月";
        case 8:return "八月";
        case 9:return "九月";
        case 10:return "十月";
        case 11:return "十一月";
        case 12:return "十二月";
      }
    }
  },
  data(){
    return{
      // data:{
      //   day:"1",
      //   week:"2"
      // }
    }
  }
}
</script>

<style scoped lang="less">
.month{
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
  .h2{
    flex: 0 0 120px;
    display: flex;
    justify-content: center;
  }
  div{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .day{
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
